<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="js/common.js"></script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime">2018-07-11</span>
            <i class="fa fa-eye fa-fw"></i>
             <span render-html="viewCount"></span>
            <i class="fa fa-thumbs-up" style="color: yellow"> </i>
            <span id="likeCount">0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName">逍遥</span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>0</span>篇游记
                    <span>0</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间
                    <span render-html="travelTime">2018-07-11</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName">和朋友</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="content.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" style="color: yellow" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" .btn-scid="collectBtn" id="commentBtn1"> </i>
        </div>
    </div>
</div>
<script>
    $(function () {
        var id = getParams().id;
        var num;//总点赞数量;
        $.get("/travels/" + id, {"purpose": 1}, function (data) {
            $(".travels").renderValues(data);
        })

        $("#commentBtn").click(function () {
            window.location.href = "travelCatalogs.html?id=" + id;
        })
        //回显总点赞数量
        $.get("/travels/likeCount/" + id, function (data) {
            num = data;
            $("#likeCount").html(data);
        })


        var user = getUser();
        var state = true;
        //回显是否点赞
        if (user) {
            $.get("/users/" + user.id + "/like", {travelId: id}, function (data) {
                if (data) {
                    $("#likeBtn").addClass("fa-thumbs-up");
                } else {
                    state = false;
                }
            })
        }
        $("#likeBtn").click(function () {
            if (user) {
                state = !state;
                $(this).toggleClass("fa-thumbs-up", state);
                if (state) {
                    $("#likeCount").html(++num);
                    $.post("/users/" + user.id + "/like", {travelId: id}, function (data) {

                    })
                } else {
                    $("#likeCount").html(--num);
                    $.ajax({
                        type: "post",
                        url: "/users/" + user.id + "/dislike",
                        data: {_method: "DELETE", travelId: id}
                    });
                    console.log("已取消点赞");
                }
                //
            } else {
                $(document).dialog({
                    type : 'confirm',
                    closeBtnShow: true,
                    content: '亲!您还未登录,点击确定按钮将回到登录页面',
                    onClickConfirmBtn: function(){
                        window.location="/mine/simpleProfiles.html"
                    },
                    onClickCancelBtn : function(){
                    }

                });
            }
        })



    })

    $(function () {
        //点击收藏判断用户是否有登录
        $("#commentBtn1").click(function (d) {
            if (!getUser()){
                $(document).dialog({
                    type : 'confirm',
                    closeBtnShow: true,
                    content: '亲!您还未登录,点击确定按钮将回到登录页面',
                    onClickConfirmBtn: function(){
                        window.location="/mine/simpleProfiles.html"
                    },
                    onClickCancelBtn : function(){
                    }
                });
            }
        })
        //判断当前用户是否登录
        if (getUser().id) {
            //回显当前用户,思路用当前用户的ID和游记ID查询数据库
            $.get("/users/" + getUser().id + "/travel/collect", {travelId: getParams().id}, function (data) {
                console.log(data);
                //2.如果有值就是已收藏,否则就是未收藏
                if (data.success) {
                    //3.修改五角星样式样式
                    //删除原本样式的星星
                    $(".fa-star-o").removeClass("fa fa-star-o");
                    //在添加实心的五角星颜色红色
                    $("#commentBtn1").addClass("fa fa-star").attr('style', 'color:yellow;width:100px');
                    isCollect(0)
                } else {
                    isCollect(1)
                }
            })
        }
    })
    //抽取判断收藏还是取消
    function isCollect(i) {
        var counts = 0;
        //绑定收藏按钮
        $("#commentBtn1").click(function () {
            counts++;//计数器用来判断用户点击取消收藏还是添加收藏
            if (counts % 2 == i) {
                // 用户点击次数为单数就是新增,双数就是取消

                //删除原本样式的星星
                $(".fa-star-o").removeClass("fa fa-star-o");
                //在添加实心的五角星颜色红色
                $("#commentBtn1").addClass("fa fa-star").attr('style', 'color:yellow;width:100px');

                //加入收藏
                $.post("/users/travel/collect", {userId: getUser().id, travelId: getParams().id}, function (data) {
                })

                $(document).dialog({
                    content: '已添加到我的收藏',
                });
            } else {
                //点击取消收藏添加空心五角星颜色黑色
                $("#commentBtn1").addClass("fa fa-star-o").attr('style', 'color:black;width:100px')
                $.ajax({//删除收藏
                    type: "POST",
                    url: "/users/travel/collect",
                    //data: "_method=DELETE&dailyId="+dailyId+"&userId="+userId+"",
                    data: {_method: "DELETE", travelId: getParams().id, userId: getUser().id},
                    success: function (msg) {
                    }
                });
                $(document).dialog({
                    content: '已取消收藏',
                });
            }
        })
    }

</script>
</body>
</html>